{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '新增文档'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <form action="#!" method="post" class="row">
            <div class="mb-3 col-md-12">
              <label for="type" class="form-label">栏目</label>
              <div class="form-controls">
                <select name="type" class="form-select" id="type">
                  <option value="1">小说</option>
                  <option value="2">古籍</option>
                  <option value="3">专辑</option>
                  <option value="4">自传</option>
                </select>
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <label for="title" class="form-label">标题</label>
              <input type="text" class="form-control" id="title" name="title" value="" placeholder="请输入标题" />
            </div>
            <div class="mb-3 col-md-12">
              <label for="seo_keywords" class="form-label">关键词</label>
              <input type="text" class="form-control" id="seo_keywords" name="seo_keywords" value="" placeholder="关键词" />
            </div>
            <div class="mb-3 col-md-12">
              <label for="seo_description" class="form-label">描述</label>
              <textarea class="form-control" id="seo_description" name="seo_description" rows="5" value="" placeholder="描述"></textarea>
            </div>
            <div class="mb-3 col-md-12 position-relative">
              <label for="more_pics">多图上传</label>
              <div class="js-upload-images">
                <div id="picker_more_pics">上传多张图片</div>
                <input type="hidden" name="more_pics" data-multiple="true" data-size="2097152" data-ext='gif,jpg,jpeg,bmp,png' id="more_pics" value="">
                <ul id="file_list_more_pics" class="list-inline row lyear-uploads-pic mb-0">
                  <li class="col-6 col-sm-3 col-md-2 list-images-item">
                    <figure>
                      <img src="{$xpConfig['web_static']}/example/images/gallery/1.jpg" />
                      <figcaption>
                        <a class="btn btn-round btn-primary btn-link-pic" href="images/gallery/1.jpg"><i class="mdi mdi-eye"></i></a>
                        <a class="btn btn-round btn-danger btn-remove-pic" data-id="1"><i class="mdi mdi-delete"></i></a>
                      </figcaption>
                    </figure>
                  </li>
                  <li class="col-6 col-sm-3 col-md-2 list-images-item">
                    <figure>
                      <img src="{$xpConfig['web_static']}/example/images/gallery/g-1.jpg" />
                      <figcaption>
                        <a class="btn btn-round btn-primary btn-link-pic" href="images/gallery/g-1.jpg"><i class="mdi mdi-eye"></i></a>
                        <a class="btn btn-round btn-danger btn-remove-pic" data-id="2"><i class="mdi mdi-delete"></i></a>
                      </figcaption>
                    </figure>
                  </li>
                </ul>
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <label for="content">内容</label>
              <p class="mb-0">HTML编辑器这里就不做演示了，请自行选择HTML编辑器</p>
            </div>
            <div class="mb-3 col-md-12">
              <label for="tags" class="form-label">标签</label>
              <div class="form-controls">
                <input class="js-tags-input form-control" type="text" id="tags" name="tags" value="" />
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <label for="sort" class="form-label">排序</label>
              <input type="text" class="form-control" id="sort" name="sort" value="0" />
            </div>
            <div class="mb-3 col-md-12">
              <label for="status" class="form-label">状态</label>
              <div class="clearfix">
                <div class="form-check form-check-inline">
                  <input type="radio" id="statusOne" name="customRadioInline" class="form-check-input">
                  <label class="form-check-label" for="statusOne">禁用</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" id="statusTwo" name="customRadioInline" class="form-check-input" checked>
                  <label class="form-check-label" for="statusTwo">启用</label>
                </div>
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
              <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
            </div>
          </form>

        </div>
      </div>
    </div>

  </div>
  <script type="text/javascript">
    $(document).ready(function(){
        // 图片上传(单张图片，多张图片)
        $('.js-upload-image,.js-upload-images').each(function() {
            var $input_file      = $(this).find('input'),
                $input_file_name = $input_file.attr('name'),
                $multiple        = $input_file.data('multiple'),  // 是否选择多个文件
                $ext             = $input_file.data('ext'),       // 支持的文件后缀，示例以图片为例
                $size            = $input_file.data('size');      // 支持最大的文件大小
    
            var $file_list = $('#file_list_' + $input_file_name);
            var ratio = window.devicePixelRatio || 1;
            var thumbnailWidth = 165 * ratio;
            var thumbnailHeight = 110 * ratio;
            
            var uploader = WebUploader.create({
                auto: true,
                duplicate: true,
                resize: false,
                swf: 'js/webuploader/Uploader.swf',
                server: 'http://example.itshubao.com/index/test/upload/type/webuploader',
                pick: {
                    id: '#picker_' + $input_file_name,
                    multiple: $multiple
                },
                fileSingleSizeLimit: $size,
                accept: {
                    title: 'Images',
                    extensions: $ext,
                    mimeTypes: 'image/*'
                }
            });
            
            uploader.on('fileQueued', function(file) {
                
                var $li = $('<li class="col-6 col-sm-3 col-md-2 list-images-item" id="' + file.id + '">' +
                            '  <figure>' +
                            '    <img>' +
                            '    <figcaption>' +
                            '      <a class="btn btn-round btn-primary btn-link-pic" href="#!"><i class="mdi mdi-eye"></i></a>' +
                            '      <a class="btn btn-round btn-danger btn-remove-pic" href="#!"><i class="mdi mdi-delete"></i></a>' +
                            '    </figcaption>' +
                            '  </figure>' +
                            '</li>'),
                    $img = $li.find('img');
                
                if ($multiple) {
                    $file_list.append($li);
                } else {
                    $file_list.html($li);
                    $input_file.val('');
                }
                uploader.makeThumb(file, function(error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
                $('<div class="progress progress-sm"><div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>').appendTo($li);
            });
            uploader.on('uploadProgress', function(file, percentage) {
                var $percent = $('#' + file.id).find('.progress-bar');
                $percent.css('width', percentage * 100 + '%');
            });
            uploader.on('uploadSuccess', function(file, response) {
                var $li = $('#' + file.id);
                if (response.status == 1) {
                    if ($multiple) {
                        if ($input_file.val()) {
                            $input_file.val($input_file.val() + ',' + response.id);
                        } else {
                            $input_file.val(response.id);
                        }
                        $li.find('.btn-remove-pic').attr('data-id', response.id);
                    } else {
                        $input_file.val(response.id);
                    }
                }
                $('<div class="' + response.class + ' success"></div>').text(response.info).appendTo($li);
                $li.find('a.btn-link-pic').attr('href', response.path);
            });
            uploader.on('uploadError', function(file) {
                var $li = $('#' + file.id);
                $('<div class="bg-danger error">上传失败</div>').appendTo($li);
            });
            uploader.on('error', function(type) {
                switch (type) {
                case 'Q_TYPE_DENIED':
                    //alert('图片类型不正确，只允许上传后缀名为：' + $ext + '，请重新上传！');
                    showNotify('图片类型不正确，只允许上传后缀名为：' + $ext + '，请重新上传！', 'danger', 1500);
                    break;
                case 'F_EXCEED_SIZE':
                    //alert('图片不得超过' + ($size / 1024) + 'kb，请重新上传！');
                    showNotify('图片不得超过' + ($size / 1024) + 'kb，请重新上传！', 'danger', 1500);
                    break;
                }
            });
            uploader.on('uploadComplete', function(file) {
                setTimeout(function() {
                    $('#' + file.id).find('.progress').remove();
                }, 500);
            });
            // 删除操作
            $file_list.delegate('.btn-remove-pic', 'click', function() {
                if (confirm("你确认要删除该图片吗?")) { // 可改为对话框插件
                    if ($multiple) {
                        var id = $(this).data('id'),
                        ids = $input_file.val().split(',');
                        if (id) {
                            for (var i = 0; i < ids.length; i++) {
                                if (ids[i] == id) {
                                    ids.splice(i, 1);
                                    break;
                                }
                            }
                            $input_file.val(ids.join(','));
                        }
                    } else {
                        $input_file.val('');
                    }
                    $(this).closest('.list-images-item').remove();
                }
            });
            // 接入图片查看插件
            $(this).magnificPopup({
                delegate: 'a.btn-link-pic',
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
        });
      
        // 图片展示
        jQuery('.js-gallery').each(function() {
            jQuery(this).magnificPopup({
                delegate: 'a.img-link',
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
        });
    });
    </script>